<template>
    <Content title="使用物料">
        <view class="from-box" :style="{ 'padding-bottom': '160rpx' }">
            <view class="content content-bottom">
                <u-form labelPosition="left" :model="model" labelWidth="120" labelAlign="left" :rules="rules"
                    ref="uForm">
                    <u-form-item borderBottom label="备件品名" prop="materialName" required>
                        <uni-data-select v-if="!pageData.id" v-model="model.materialName" :localdata="list"
                            :showInput="!pageData.id" @inputChange="getList" @change="change" placeholder="请选择"
                            :disabled="!!pageData.id"></uni-data-select>
                        <u-input v-else label v-model="model.materialName" disabled></u-input>
                    </u-form-item>

                    <u-form-item borderBottom label="备件料号" prop="materialCode" required>
                        <u-input label v-model="model.materialCode" placeholder="请填写备件料号" disabled></u-input>
                    </u-form-item>

                    <u-form-item borderBottom label="库存数量" prop="inventoryQuantity">
                        <MyNumber label v-model.number="model.inventoryQuantity" :min="1" :max="999999"
                            placeholder="请填写库存数量" :disabled="!!pageData.id"></MyNumber>
                    </u-form-item>

                    <u-form-item borderBottom label="备件规格" prop="materialModel">
                        <u-input label v-model="model.materialModel" placeholder="请填写备件规格" disabled></u-input>
                    </u-form-item>

                    <u-form-item borderBottom label="使用数量" prop="usedQuantity" required>
                        <MyNumber label v-model.number="model.usedQuantity" :min="1" :max="999999"
                            placeholder="请填写数量"></MyNumber>
                    </u-form-item>

                    <u-form-item borderBottom label="处理方式及结果" prop="handlingMethod">
                        <u-input label v-model="model.handlingMethod" :maxlength="100" placeholder="请填写处理方式及结果"
                            :disabled="!!pageData.id"></u-input>
                    </u-form-item>

                    <view class="btn-v">
                        <view class="but-box">
                            <u-button class="btn" text="取消" @click="back"></u-button>
                            <u-button :throttleTime="1000" class="btn" type="primary" @click="submit" text="确认"
                                :loading="loading"></u-button>
                        </view>
                    </view>
                </u-form>
            </view>
        </view>
    </Content>
</template>

<script>
    import Content from "@/components/content/index.vue";
    import MyNumber from "@/components/MyNumber.vue";
    import {
        getUserInfo,
        getPageData,
    } from "@/store/user";
    import fetch from "@/utils/fetch";

    export default {
        components: {
            Content,
            MyNumber
        },
        data() {
            return {
                pageData: {},
                list: [],
                loading: false,
                model: {
                    materialCode: '',
                    materialName: '',
                    inventoryQuantity: '',
                    materialModel: '',
                    usedQuantity: '',
                    handlingMethod: '',
                },
                rules: {
                    materialCode: {
                        type: "string",
                        required: true,
                        message: "请填写",
                        trigger: ["change", "blur"],
                    },
                    materialName: {
                        type: "string",
                        required: true,
                        message: "请填写",
                        trigger: ["change", "blur"],
                    },
                    usedQuantity: {
                        type: "number",
                        required: true,
                        message: "请填写",
                        trigger: ["change", "blur"],
                    },
                },
            };
        },
        watch: {
            loading(val) {
                if (val)
                    this.$loading.open();
                this.$loading.close();
            }
        },
        onLoad(option) {
            this.id = option.id;
            this.deviceMId = option.deviceMId;
            this.pageData = getPageData();
            if (this.pageData.id) {
                this.model = {
                    id: this.pageData.id,
                    materialCode: this.pageData.materialCode,
                    materialName: this.pageData.materialName,
                    inventoryQuantity: this.pageData.inventoryQuantity,
                    materialModel: this.pageData.materialModel,
                    usedQuantity: this.pageData.usedQuantity,
                    handlingMethod: this.pageData.handlingMethod
                };
                this.getList(this.model.materialName);
            }
        },
        onReady() {
            if (this.$refs.uForm) this.$refs.uForm.setRules(this.rules);
        },
        methods: {
            back() {
                uni.navigateBack({
                    delta: 1,
                });
            },
            getList(query) {
                fetch("post", "/dms/material/page", {
                    pageSize: 100,
                    pageNum: 1,
                    materialName: query.split('-')[0],
                }).then((res) => {
                    this.list = (res.data.records || []).map(item => {
                        item.item = item;
                        item.text = item.materialCode + '-' + item.materialName;
                        item.value = item.materialName;
                        return item;
                    });
                });
            },
            change(value) {
                const obj = this.list.find(item => item.materialName === value);
                if (obj) {
                    this.model.materialCode = obj.materialCode;
                    this.model.materialName = obj.materialName;
                    this.model.materialModel = obj.materialModel;
                }
            },
            submit() {
                const that = this;
                that.$refs.uForm.validate().then((valid) => {
                    if (valid) {
                        that.loading = true;
                        let url = '/dms/deviceMaintenanceWorkOrder/addMaintainBackupTemporary';
                        let data = that.model;
                        if (that.pageData.id) {
                            url = '/dms/deviceMaintenanceWorkOrder/updateMaintainBackupTemporary';
                            data = {
                                id: that.model.id,
                                handlingMethod: that.model.handlingMethod,
                                inventoryQuantity: that.model.inventoryQuantity,
                                materialCode: that.model.materialCode,
                                usedQuantity: that.model.usedQuantity
                            };
                        }
                        fetch("post", url, {
                            dmsMaintainId: parseInt(that.id),
                            deviceMId: that.deviceMId,
                            ...data,
                        }).then((data) => {
                            that.loading = false;
                            uni.$emit("openToast", {
                                type: "success",
                                title: "操作成功",
                                complete() {
                                    setTimeout(() => {
                                        uni.navigateBack({
                                            delta: 1,
                                        });
                                    }, 1000);
                                },
                            });
                        }).catch(() => {
                            that.loading = false;
                        });
                    }
                });
            },
        },
    };
</script>

<style scoped lang="scss">
    .from-box {
        padding: 20rpx;
        height: 100%;
        overflow: auto;
        display: flex;
        flex-direction: column;

        /deep/ .u-form-item__body__left__content__label {
            margin-left: 20rpx;
        }

        /deep/ .uni-select__input-placeholder {
            color: #cbc9cc !important;
            font-size: 15px !important;
        }
    }

    .content {
        padding: 20rpx 30rpx;
        background-color: #ffffff;
        border-radius: 5px;
        box-shadow: 0 12rpx 18rpx -6rpx rgba(0, 0, 0, 0.2);
    }

    .content-bottom {
        flex: 1;
    }
</style>